<template>
	<a-card>
		<Tree :data="list" />

		<div>
			<a-button
				type="primary"
				@click="handleOpenModalClick"
				>测试modal</a-button
			>
		</div>

		<Btn
			text="xxxx"
			:data="data1"
		/>
		<div>
			<a-button @click="handleTestClick">点击</a-button>
		</div>
	</a-card>
</template>

<script setup lang="ts">
import cmodal from '../modal/index'
import { data } from './data'
import Tree from './tree'

const list = ref(data)

const handleOpenModalClick = () => {
	cmodal({
		title: 'title',
		content: 'content',
		ok: () => {
			return new Promise<void>((resolve, reject) => {
				setTimeout(() => {
					message.success('弹窗成共打开了')
					resolve()
				}, 3000)
			})
		}
	})
}

const data1 = ref([
	{
		name: 'xxx',
		child: [
			{
				name: '11111'
			},
			{
				name: '2222'
			}
		]
	},
	{
		name: 'xxxx1'
	}
])

const handleNodeClick = item => {
	item.expand = !item.expand
}

const Btn = props => {
	return props.data.map(item => {
		return h(
			'div',
			{
				class: 'bar',
				style: { marginLeft: '20px' }
			},
			[
				item.child?.length && h('span', { onClick: () => handleNodeClick(item) }, item.expand ? '+' : '-'),
				item.name,
				item.child?.length && item.expand && h(Btn, { data: item.child })
			]
		)
	})
}

const handleTestClick = () => {
	data1.value[0].name = '我被改变了'
}
</script>

<style lang="less" scoped></style>
